
<template>
  <div class="event-document-wrap">
    <h1>data</h1>
    <div class="prewrap" v-highlight>
      <!-- 使用指令 -->
      <pre>
        <code class="javascript">
            //data为定义的数据模型
            const { data  } = controller; 
            const { form } = data
            //{
            //    "a": 1,
            //    "b": 2,
            //    "c": {
            //        "d": 3
            //    }
            //}
        </code>
    </pre>
    </div>
    <h1>$</h1>
    <div class="prewrap" v-highlight>
      <!-- 使用指令 -->
      <pre>
        <code class="javascript">
            //$为组件选择器
            const { $  } = controller; 
            // $("xxx").set("title","我是标题")
            // $("xxx").get("title")
        </code>
    </pre>
    </div>
    <h1>axios</h1>
    <div class="prewrap" v-highlight>
      <!-- 使用指令 -->
      <pre>
        <code class="javascript">
            //axios 网络通信工具
            const { axios } = controller; 
            // axios.get()
        </code>
    </pre>
    </div>
    <h1>message</h1>
    <div class="prewrap" v-highlight>
      <!-- 使用指令 -->
      <pre>
        <code class="javascript">
            //message为饿了吗提示组件
            const { message } = controller; 
            // message.success("成功")
        </code>
    </pre>
    </div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name:"custom-event-document",
  setup(props, { attrs }) {
    return {};
  },
});
</script>

<style   scoped>
* {
  margin: 0;
  padding: 0;
}
.event-document-wrap h1 {
  font-size: 28px;
}
.prewrap {
  font-size: 18px;
}
</style>
